<template>
<div>
 <h1 style="float: left;width:1600px;margin-bottom: 20px;color:blue;height: 30px;background: palevioletred;border-radius: 20px">贷款数据</h1>

  <div style="margin-left: 700px;width: 1000px;height: 100px;margin-bottom: 50px">
    <el-form :inline="true" :model="borrower" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="borrower.repaymentType" placeholder="请输入还款方式"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
      </el-form-item>
    </el-form>

  </div>

  <el-table
      :data="BorrowerTable"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="borrowId"
        label="贷款ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="price"
        label="贷款金额"
        width="180">
    </el-table-column>

    <el-table-column
        prop="loanperiods"
        label="贷款期数">
    </el-table-column>
    <el-table-column
        prop="repaymentType"
        label="还款方式">
    </el-table-column>
    <el-table-column
        prop="purpose"
        label="贷款用途">
    </el-table-column>
    <el-table-column
        prop="annual"
        label="年利率">
    </el-table-column>
    <el-table-column
        prop="states"
        label="审核状态">
      <template slot-scope="scope">
        <p v-if="scope.row.states==0">待审核</p>
        <p v-if="scope.row.states==1">已审核</p>
      </template>
    </el-table-column>
    <el-table-column
         prop="createTime"
        :formatter="dateForma"
         label="创建时间">
    </el-table-column>
    <el-table-column
        prop="startTime"
        :formatter="dateForma"
        label="生效时间">
    </el-table-column>
    <el-table-column
        label="操作" style="width: 1000px">
      <template slot-scope="scope">
        <button style="width: 50px;height: 30px;margin-right:15px;background: deeppink;color: #f0f9eb;border: none;border-radius: 15px"
                @click="XiangQing(scope)">
          详情</button>
        <button  style="width: 50px;height: 30px;background:blueviolet;color: #f0f9eb;border: none;border-radius: 15px" @click="repayment(scope)">
          还款</button>
      </template>
    </el-table-column>

  </el-table>



  <div style="margin-top: 50px">
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.borrower.pageNum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="this.borrower.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.borrower.total">
  </el-pagination></div>
</div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      Tag:[],
     BorrowerTable:[],
      borrower:{
        pageNum: 1,
        pageSize: 3,
        total:0
      },
      logo: require('@/assets/222.png'),
    }
  },
  created() {
    this.list()
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    list(){
      // eslint-disable-next-line no-unused-vars
      this.$http.post("/borrower/list",this.borrower).then( res=>{
        console.log(res.data)
        this.BorrowerTable=res.data.data.records
        this.borrower.total=res.data.data.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.borrower.pageSize=val
      this.list()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.borrower.pageNum=val
      this.list()
    },
    XiangQing(scope){
      this.$router.push({
        path:"/XiangQing",
        query:{
          borrowId:scope.row.borrowId,
          productId:scope.row.productId,
          infoId:scope.row.infoId
        }
      })
    },
    dateForma:function(row,column){

      var date = row[column.property];

      if(date == undefined){return ''};

      return moment(date).format("YYYY-MM-DD HH:mm:ss")

    },
    // 还款方法
    repayment(scope){
       this.$router.push({
         path:"/Repayment",
         query:{
           borrowId:scope.row.borrowId
         }
       })
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
